<template>
  <div>
      <!-- 评论区 -->
        <div class="comment" v-for="(item,index) in comments" v-bind:index="index" >
            <b>{{item.name}}<span>  {{item.time}}</span></b>
            <p @click="changeCommenter(item.name,index)">{{item.content}}</p>
            <div v-if="item.reply.length > 0">
                <div class="reply" v-for="reply in item.reply">
                    <b>{{reply.responder}}&nbsp;&nbsp;回复&nbsp;&nbsp;{{reply.reviewers}}<span>{{reply.time}}</span></b>
                    <p @click="changeCommenter(reply.responder,index)">{{reply.content}}</p>
                </div>
            </div>
            <div class="horizontal-ine"></div>
        </div> 
  </div> 
</template>

<script>
    import bus from '../utils/bus';
 export default {
     props:{
        title:{
            type:String
        }
     },
   data () {
     return {
        comments:[
            {
                name: '会飞的鱼',
                time: '2021-01-20',
                content: '讲得非常好，good nice',
                reply:[
                    {
                        responder: '带刺的玫瑰',
                        reviewers: "会飞的鱼", //被评论者
                        time: "2021-02-01",
                        content: "你说得对,顶"
                    },
                    {
                        responder: '欲望之火',
                        reviewers: "会飞的鱼", //被评论者
                        time: "2021-02-02",
                        content: "我赞同"
                    }
                ]
            },
            {
                name: '早起的鸟儿有食吃',
                time: '2021-02-18',
                content: '希望有朝一日我也能向你一样',
                reply:[]
            }
            
        ]
     }
   },
   created() {
     //this.$parent.$on('submit-comment', this.updateComnent);
     bus.$on('submit-comment', this.updateComnent);
     
   },

   methods: {
        changeCommenter: function(name,index) {
            this.$emit("change",name,index);
        },
        updateComnent(commet){
             console.log("comment-template  update: " + JSON.stringify(commet));
             this.comments.push(commet);
             //comment
        }
   }
 }
</script>

<style scoped>
    .content{
        color: blueviolet;
        font-size: 30px;
    }
    .horizontal-ine{
        background-color: rgb(151, 155, 155);
        height: 1px;
        margin-bottom: 2px;
    }
    .reply{
        margin-left: 60px;
    }
</style>
